<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #666;

        }

        ul li {
            list-style: none;
        }

        ul {
            width: 180px;
            height: 206px;
            margin: 100px auto;
            /* border: 1px solid red; */
            clear: both;
        }

        /* ul * {
            border: 1px solid red;
        } */
        ul li {
            overflow: hidden;
            margin-top: 10px;
            margin-right: 20px;
            float: left;
            width: 60px;
            height: 40px;
        
        }

        ul li a img {
            position: relative;
            max-width: 100%;
        }

        ul li:nth-child(1),
        ul li:nth-child(3),
        ul li:nth-child(5) {
            margin-left: 10px;
            /* background: red; */
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="#"><img src="img/1.gif" alt="图片1"></a>
        </li>
        <li>
            <a href="#"><img src="img/2.gif" alt="图片1"></a>
        </li>
        <li>
            <a href="#"><img src="img/3.gif" alt="图片1"></a>
        </li>
        <li>
            <a href="#"><img src="img/4.gif" alt="图片1"></a>
        </li>
        <li>
            <a href="#"><img src="img/5.gif" alt="图片1"></a>
        </li>
        <li>
            <a href="#"><img src="img/6.gif" alt="图片1"></a>
        </li>
    </ul>
    <script src="js/animate.js"></script>
    <script>
          
        // 获取图片
        let imgs = $('img');
  
        setInterval(function(){
            let img_arr = random_number(6);
            for(let i=0;i<img_arr.length;i++){
                img_arr[i] = "img/"+img_arr[i]+".gif";
            }
            for(let i =0;i<imgs.length;i++){
                imgs[i].src = img_arr[i];
                // animate(imgs[i],-2*i);
            }
            console.log(img_arr);
        },1000);
        
        // 随机生成6个不重复的数
        function random_number(n) {
            let random_arr = [];
            for (let i = 0; i < n; i++) {
                let random = Math.floor(Math.random() * (6 - 1 + 1) + 1);
                if (random_arr.indexOf(random) == -1) {
                    random_arr.push(random);
                } else {
                    i--;
                }
            }
            return random_arr;
        }

        // console.log(random_number(6));

        function $(select) {
            return document.querySelectorAll(select);
        }
    </script>
</body>


</html>